<template>
  <div>
    <top-bar backShow="true" titleShow="true" title="行情"></top-bar>
    <ul class="content gfc-grey1">
      <li class="con-bg">
        <div class="total flex">
          <div class="flex-1">
            <div class="type gfc-white">GBPUSD</div>
            <div class="num gfc-green">-0.03%</div>
          </div>
          <div class="flex-1">
            <div>买入<span class="gfc-orange2">35248</span></div>
            <div>买家<span class="gfc-white">52.38%</span></div>
          </div>
          <div class="flex-1">
            <div>卖出<span class="gfc-green">35248</span></div>
            <div>卖家<span class="gfc-white">52.38%</span></div>
          </div>
        </div>
        <div class="follow clearfix">
          <div class="pull-left">
            <div>持仓牛人<span class="gfc-white">35248</span></div>
            <div class="btn">去跟牛人</div>
          </div>
          <div class="pull-right">
            <div>持仓订单<span class="gfc-white">35248</span></div>
            <div class="btn">去跟牛单</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  export default {
    data() {
      return {}
    },
    components: {
      topBar
    },
    methods: {}
  }
</script>

<style scoped>
  .content li {
    margin-bottom: .1rem;
    font-size: .16rem;
  }

  div.total {
    padding: .2rem .18rem;
    border-bottom: 1px solid #2d333b;
  }

  div.total .flex-1:first-child {
    font-size: .2rem;
  }

  div.total .flex-1 div {
    height: .2rem;
    line-height: .2rem;
  }

  div.total .flex-1 div:first-child {
    margin-bottom: .18rem;
  }

  div.total span, div.follow span {
    padding-left: .15rem;
  }

  div.follow {
    padding: .2rem .18rem;
  }

  div.follow .btn {
    width: 1.5rem;
    height: .4rem;
    line-height: .4rem;
    border-radius: .04rem;
    background: #F25E44;
    text-align: center;
    color: #fff;
    font-size: .18rem;
    margin-top: .2rem;
  }
</style>
